<template>
  <div>
    <table>
      <tr>
        <td>
          <div class="renshi">
            <el-link icon="el-icon-s-management">最新动态</el-link>
          </div>
          <div class="tu">
            <el-link icon="el-icon-refresh-right"></el-link>
            <el-link icon="el-icon-more"></el-link>
          </div>
          <div class="block">
            <el-carousel height="150px">
              <el-carousel-item v-for="item in 4" :key="item">
                <h3 class="small">{{ item }}</h3>
              </el-carousel-item>
            </el-carousel>
          </div>
        </td>
        <!-- <td>
            <div>
                 <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
             <li :v-for="i in count" class="infinite-list-item">{{ i }}</li>
            </ul>
            </div>
        </td> -->
        <td>
              <div class="renshi">
            <el-link icon="el-icon-s-management">公告通知</el-link>
          </div>
          <div class="tu">
            <el-link icon="el-icon-refresh-right"></el-link>
            <el-link icon="el-icon-more"></el-link>
          </div>
          <table class="b">
              <tr class="a">
                  <td>全部消息</td>
                  <td>未读</td>
                  <td>已读</td>
                  <td>已过期</td>
              </tr>
              <tr>
                  放假通知 </tr>
                  <tr>报销材料以提交的通知</tr>
                  <tr>新员工分部通知</tr>
          </table>
          
          
          
        </td>
      </tr>
     <tr >
        <td >
             <div class="renshi">
                <el-link icon="el-icon-s-management">待我审批</el-link>
              </div>
              <div class="tu">
                  <el-link icon="el-icon-refresh-right"></el-link>
                  <el-link icon="el-icon-more"></el-link>
              </div>
          <table class="b">
            <tr class="a">
              <td class="a">
                <li><el-link type="primary">办公用品领用审批</el-link></li>
              </td>

              <td>Catelin</td>
              <td>2019-09-9 </td>
            </tr>
            <tr class="a">
              <li><el-link type="primary">出差用车审批</el-link></li>
              
              <td>Catelin</td>
              <td>2019-09-9 </td>
            </tr><tr class="a">
              <td class="a">
                <li><el-link type="primary">考勤年假申请</el-link></li>
              </td>
              <td>Catelin</td>
              <td>2019-09-9 </td>
            </tr>
             <tr class="a">
              <td class="a">
                <li><el-link type="primary">办公用品领用审批</el-link></li>
              </td>

              <td>Catelin</td>
              <td>2019-09-9 </td>
            </tr>
            <tr class="a">
              <li><el-link type="primary">出差用车审批</el-link></li>
              
              <td>Catelin</td>
              <td>2019-09-9 </td>
            </tr><tr class="a">
              <td class="a">
                <li><el-link type="primary">考勤年假申请</el-link></li>
              </td>
              <td>Catelin</td>
              <td>2019-09-9 </td>
            </tr>
            
          </table>
        </td>
        <td>
             <div class="renshi">
                <el-link icon="el-icon-s-management">问卷调查</el-link>
              </div>
              <div class="tu">
                  <el-link icon="el-icon-refresh-right"></el-link>
                  <el-link icon="el-icon-more"></el-link>
              </div>
             
              <table class="b">
            <tr class="a">
              <td class="a">
                <li><el-link type="primary">11月员工满意度调查</el-link></li>
              </td>
              <td>查看详情 </td>
              <td>3天后到期</td>
              
            </tr>
            <tr class="a">
              <td class="a">
                <li><el-link type="primary">11月员工满意度调查</el-link></li>
              </td>
              <td>查看详情 </td>
              <td>3天后到期</td>
              
            </tr>
            <tr class="a">
              <td class="a">
                <li><el-link type="primary">11月员工满意度调查</el-link></li>
              </td>
              <td>查看详情 </td>
              <td>3天后到期</td>
              
            </tr>
            <tr class="a">
              <td class="a">
                <li><el-link type="primary">11月员工满意度调查</el-link></li>
              </td>
              <td>查看详情 </td>
              <td>3天后到期</td>
              
            </tr>
            <tr class="a">
              <td class="a">
                <li><el-link type="primary">11月员工满意度调查</el-link></li>
              </td>
              <td>查看详情 </td>
              <td>3天后到期</td>
              
            </tr>
            <tr class="a">
              <td class="a">
                <li><el-link type="primary">11月员工满意度调查</el-link></li>
              </td>
              <td>查看详情 </td>
              <td>3天后到期</td>
              
            </tr>
            <tr class="a">
              <td class="a">
                <li><el-link type="primary">11月员工满意度调查</el-link></li>
              </td>
              <td>查看详情 </td>
              <td>3天后到期</td>
              
            </tr>
            <tr class="a">
              <td class="a">
                <li><el-link type="primary">11月员工满意度调查</el-link></li>
              </td>
              <td>查看详情 </td>
              <td>3天后到期</td>
              
            </tr>
            <tr class="a">
              <td class="a">
                <li><el-link type="primary">11月员工满意度调查</el-link></li>
              </td>
              <td>查看详情 </td>
              <td>3天后到期</td>
              
            </tr>
            <tr class="a">
              <td class="a">
                <li><el-link type="primary">11月员工满意度调查</el-link></li>
              </td>
              <td>查看详情 </td>
              <td>3天后到期</td>
              
            </tr>
            <tr class="a">
              <td class="a">
                <li><el-link type="primary">11月员工满意度调查</el-link></li>
              </td>
              <td>查看详情 </td>
              <td>3天后到期</td>
              
            </tr>
            <tr class="a">
              <td class="a">
                <li><el-link type="primary">11月员工满意度调查</el-link></li>
              </td>
              <td>查看详情 </td>
              <td>3天后到期</td>
              
            </tr>
            
            
          </table>

        </td>
        
     </tr>
     <tr>
         <td>
             <table>
                 <tr>
                     <td>
             <div class="renshi">
                <el-link icon="el-icon-s-management">内部邮件</el-link>
              </div>
              <div class="tu">
                  <el-link icon="el-icon-refresh-right"></el-link>
                  <el-link icon="el-icon-more"></el-link>
              </div>
             
                

                 </td>
                 </tr>
                 
                 <td>
             <div class="renshi">
                <el-link icon="el-icon-s-management">我的任务</el-link>
              </div>
              <div class="tu">
                  <el-link icon="el-icon-refresh-right"></el-link>
                  <el-link icon="el-icon-more"></el-link>
              </div>
             
                 <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                        <el-table-column
                        prop="date"
                        label="任务"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="name"
                        label="进度"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="address"
                        label="备注">
                        </el-table-column>
                        <el-table-column
                        prop="address"
                        label="备注">
                        </el-table-column>
                       
                </el-table> 
                

                 </td>
                
                 
             </table>
         </td>
         <td>
             <div class="renshi">
                <el-link icon="el-icon-s-management">我的日程</el-link>
              </div>
              <div class="tu">
                  <el-link icon="el-icon-refresh-right"></el-link>
                  <el-link icon="el-icon-more"></el-link>
              </div>
             
              <table class="b">
                <el-calendar v-model="value" >
                </el-calendar>
           
            
            </table>

        </td>
     </tr>
    </table>
  </div>
</template>

  
<script>
  export default {
    data() {
      return {
        value: new Date()
      }
    }
  }
</script>
<script>
export default {
    data () {
      return {
        count: 0
      }
    },
    methods: {
          
      load () {
          
        if(this.count==4){
            return ;
        }else
        this.count += 2
        count++;
       
      }
    }
  
};
</script>
<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.tu{
   float:right;
   margin-right: 15%;
 
}
.renshi{
    float: left;
    margin: 5px;
}
#a {
  float: left;
  margin-left: 10px;
  font-size: 5px;
}
.b{
    width: 700px;
    height: 20px;
}
</style>